import Vue from 'vue'
import Component from 'vue-class-component'
import '../settingStyle.css'

@Component
export default class CategorySettingClass extends Vue {
  selected = '1'
  wrapperHeight = 0
  categoryLists = ['SALES', '服装', '鞋履', '箱包', '配饰']
  chooseBools = []
  isOpenMan = true
  isOpenWomen = true

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 100
    this.createDefaultData()
  }

  createDefaultData () {
    for (var i = 0; i < this.categoryLists.length; i++) {
      this.chooseBools.push(true)
    }
  }

  // 女士
  changeWomanStatus() {
    this.isOpenMan = !this.isOpenMan
  }

  handlerWomanClickCell (e, index) {
    e.stopPropagation()
    let value = this.chooseBools[index]
    this.chooseBools.splice(index, 1, !value)
  }

  // 男士
  changeManStatus() {
    this.isOpenMan = !this.isOpenMan
  }

  handlerManClickCell (e, index) {
    e.stopPropagation()
    let value = this.chooseBools[index]
    this.chooseBools.splice(index, 1, !value)
  }

  // 男士UI
  createManView() {
    return <dl>
      <dd>
        <mt-cell title="男士">
          <mt-switch v-model={this.isOpenMan} onChange={this.changeManStatus}></mt-switch>
        </mt-cell>
      </dd>
      <dt v-show={this.isOpenMan}>
        {this.createdManCategoryItems()}
      </dt>
    </dl>
  }

  createdManCategoryItems() {
    const item = this.categoryLists.map((value, index) => {
      return <div onClick={ (e) => this.handlerManClickCell(e, index)}>
                <mt-cell title={value} >
                  <icon v-show={!this.chooseBools[index]} name='sortUnSelect' scale = '2'/>
                  <icon v-show={this.chooseBools[index]} name='sortSelect' scale = '2'/>
                </mt-cell>
             </div>
    })
    return item
  }

  // 女士UI
  createWomenView() {
    return <dl>
      <dd>
        <mt-cell title="女士">
          <mt-switch v-model={this.isOpenWomen} onChange={this.changeWomanStatus}></mt-switch>
        </mt-cell>
      </dd>
      <dt v-show={this.isOpenWomen}>
        {this.createdWomanCategoryItems()}
      </dt>
    </dl>
  }

  createdWomanCategoryItems() {
    const item = this.categoryLists.map((value, index) => {
      return <div onClick={ (e) => this.handlerManClickCell(e, index)}>
                <mt-cell title={value} >
                  <icon v-show={!this.chooseBools[index]} name='sortUnSelect' scale = '2'/>
                  <icon v-show={this.chooseBools[index]} name='sortSelect' scale = '2'/>
                </mt-cell>
             </div>
    })
    return item
  }

  render () {
    return (
      <div class='content'>
        <mt-header class='header' fixed title="分类设置">
          <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
        </mt-header>
        <mt-navbar
        style='margin-top:56px;background-image: linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
              background-size: 100% 1px;
              background-repeat: no-repeat;
              background-position: bottom;'
              v-model={this.selected}>
          <mt-tab-item id="1">男士</mt-tab-item>
          <mt-tab-item id="2">女士</mt-tab-item>
        </mt-navbar>
        <mt-tab-container style={this.caculateHeight + ';overflow:auto'} v-model={this.selected}>
          <mt-tab-container-item id="1">
            {this.createManView()}
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            {this.createWomenView()}
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    )
  }
}
